<script setup lang="ts">
import {h, ref, watch} from 'vue'
import {NAvatar, NText, SelectOption, SelectRenderLabel, SelectRenderTag} from 'naive-ui'
import {request} from "@/service/request";
import Page = Api.Common.Page;

const props = defineProps({
    options: {
      type: Array
    },
    formLabel: {
      type: String
    },
    multiple: {
      type: Boolean
    },
    remoteUrl: {
      type: String,
      default: '/user/getUserList'
    }
  }
)
const options = ref<SelectOption[]>([])
const renderLabel: SelectRenderLabel = (option) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    },
    [
      h(NAvatar, {
        src: option.avatar as string,
        round: true,
        size: 'small'
      }),
      h(
        'div',
        {
          style: {
            marginLeft: '12px',
            padding: '4px 0'
          }
        },
        [
          h('div', null, [option.label as string]),
          h(
            NText,
            {depth: 3, tag: 'div'},
            {
              default: () => option.role as string
            }
          )
        ]
      )
    ]
  )
}
const renderSelectTag: SelectRenderTag = ({option}) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    },
    [
      h(NAvatar, {
        src: option.avatar as string,
        round: true,
        size: 24,
        style: {
          marginRight: '12px'
        }
      }),
      option.label as string
    ]
  )
}
const getDataList = () => {
  options.value = [];
  request<Page<Api.Entity.User>>({
    url: props.remoteUrl,
    method: 'post',
    data: {
      pageSize: 10000,
      pageNumber: 1
    }
  }).then(res => {
    res.data?.content?.forEach((item: any) => {
      options.value.push({label: item.nickName, value: item.id, avatar: item.avatar, role: item.role.name})
    })
  })
}
watch(() => props.remoteUrl, (newV, oldV) => {
  if (newV !== oldV) {
    console.log('remoteUrl:', newV)
    getDataList()
  }
})
getDataList();
</script>

<template>
    <n-select
      :options="options"
      :multiple="multiple"
      :render-label="renderLabel"
      :render-tag="renderSelectTag"
    />
</template>

<style scoped>

</style>
